<script>
import ReviewApi from "../../api/review";

export default {
  props: ["bookId"],
  data() {
    return {
      reviewList: [],
      total: 0,
      pageSize: 7,
      curPage: 0,
      limit: -1,
      offset: -1
    };
  },
  methods: {
    async getReviewList(limit = -1, offset = -1) {
      try {
        let orderBy = "created_time";
        let sort = "DESC";
        const api = new ReviewApi();
        let res = await api.findAllByBookId(this.bookId, limit, offset, orderBy, sort);
        this.reviewList = res.data;
        console.log(this.reviewList);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async getCount() {
      try {
        const api = new ReviewApi();
        let res = await api.getCountByBookId(this.bookId);
        this.total = res.data.total;
        console.log(this.total);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async searchResult(data) {
      this.bookList = data;
    },
    goto(page) {
      this.curPage = page;
      this.offset = (page - 1) * this.pageSize;
      this.getReviewList(this.limit, this.offset);
    },
    async getData() {
      await this.getCount();
      await this.getReviewList(this.limit, this.offset);
    }
  },
  async mounted() {
    this.curPage = 1;
    this.limit = this.pageSize;
    this.offset = 0;
    if (this.bookId) {
      this.getData();
    }
  },
  watch:{
    bookId: function(newVal){
        newVal && this.getData();
    }
  }
};
</script>

<template>
  <div class="review-list">
    <ul>
      <li v-for="review in reviewList" :key="review.id">
        <div>
          <span class="author"> {{ review.nickname }}说:</span>
          <span class="title">标题:{{ review.title }}</span>
          <p class="content">内容:{{ review.content }}</p>
        </div>
        <div class="action">
          <span class="useful">有用</span>
          <span class="useless">无用</span>
        </div>
      </li>
    </ul>
    <my-pagination
      :total="total"
      :page-size="pageSize"
      :cur-page="curPage"
      :show-info="true"
      @goto="goto"
    />
  </div>
</template>

<style scoped>
.review-list li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(249, 252, 255);
  margin: 8px auto;
  padding: 16px;
  border-radius: 16px;
}

li:hover {
  background-color: #ffecec;
}

.review-list li div:first-of-type {
  flex: 1 1 auto;
}

.review-list li div.action {
  flex: 0 1 auto;
}

.review-list li div.action span {
  margin: 0 10px;
}
</style>
